<template>
	<div>
		<el-card shadow="never" class="!border-none">
			<div class="text-xl font-medium mb-[20px]">平台奖励</div>
			<el-form ref="formRef" class="ls-form" label-position="top">
				<el-form-item label="签到奖励金额" prop="signin_money">
					<div class="w-80">
						<el-input type="number" v-model.trim="rewardData.signin_money" placeholder="请输入签到奖励金额"></el-input>
					</div>
				</el-form-item>
			</el-form>
			<el-form ref="formRef" class="ls-form" label-position="top">
				<el-form-item label="签到奖励积分" prop="signin_point">
					<div class="w-80">
						<el-input type="number" v-model.trim="rewardData.signin_point" placeholder="请输入签到奖励积分"></el-input>
					</div>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="never" class="!border-none mt-4">
			<div class="text-xl font-medium mb-[20px]">任务奖励</div>
			<draggable class="draggable" v-model="rewardData.tasks" animation="300">
				<template v-slot:item="{ element: item, index }">
					<del-wrap class="max-w-[600px]" :key="index" @close="handleDelete(index,1)">
						<div class="bg-fill-light flex items-center w-full p-4 mb-4 cursor-move">
							<div class="ml-3 flex-1">
								<div class="flex items-center">
									<div class="w-[120px]">* 任务类型</div>
									<el-select class="w-full" v-model="item.type" placeholder="请选择任务类型" >
										<el-option v-for="item in dictData.tasks_type" :key="item.value"
											:label="item.name" :value="item.value" />
									</el-select>
								</div>
								<div class="flex items-center mt-3">
									<div class="w-[120px]">* 任务ID</div>
									<el-input type="number" disabled v-model="item.id" placeholder="请输入任务ID" />
								</div>
								<div class="flex items-center mt-3" v-if="item.type==1">
									<div class="w-[120px]">* 会员等级</div>
									<el-select class="w-full" v-model="item.member_id" placeholder="请选择会员等级" >
										<el-option v-for="item in optionsData.members" :key="item.id" :label="item.name"
											:value="item.id+''" />
									</el-select>
								</div>
								<div class="flex items-center mt-3" v-if="item.type==2">
									<div class="w-[120px]">* 首充金额</div>
									<el-input type="number" v-model="item.recharge_money" placeholder="请输入下级首充金额" />
								</div>
								<div class="flex items-center mt-3" v-if="item.type==3">
									<div class="w-[120px]">* 邀请人数</div>
									<el-input type="number" v-model="item.invite_num" placeholder="请输入邀请人数" />
								</div>
								<div class="flex items-center mt-3" v-if="item.type==3">
									<div class="w-[120px]">* 邀请人充值</div>
									<el-input type="number" v-model="item.recharge_money" placeholder="请输入邀请人充值金额" />
								</div>
								<!-- <div class="flex items-center mt-3" v-if="item.type==3">
									<div class="w-[120px]">* 可重复领取</div>
									<el-radio-group v-model="item.is_repeat">
										<el-radio label="1">是</el-radio>
										<el-radio label="0">否</el-radio>
									</el-radio-group>
								</div> -->
								<div class="flex items-center mt-3">
									<div class="w-[120px]">* 奖励金额</div>
									<el-input type="number" v-model="item.money" placeholder="请输入奖励金额" />
								</div>
								<div class="flex items-center mt-3">
									<div class="w-[120px]">* 开启状态</div>
									<el-radio-group v-model="item.is_show">
										<el-radio label="1">开启</el-radio>
										<el-radio label="0">关闭</el-radio>
									</el-radio-group>
								</div>
							</div>
						</div>
					</del-wrap>
				</template>
			</draggable>
			<div>
				<el-button type="primary" @click="handleAdd(1)">添加</el-button>
			</div>
		</el-card>
		<el-card shadow="never" class="!border-none mt-4">
			<div class="text-xl font-medium mb-[20px]">活动奖励</div>
			<div class="form-tips">请按充值金额从低到高排序，进行中的活动请勿随意删除，防止不能领取奖励</div>
			<draggable class="draggable" v-model="rewardData.activity" animation="300">
				<template v-slot:item="{ element: item, index }">
					<del-wrap class="max-w-[600px]" :key="index" @close="handleDelete(index,2)">
						<div class="bg-fill-light flex items-center w-full p-4 mb-4 cursor-move">
							<div class="ml-3 flex-1">
								<div class="">
									<div class="flex items-center">
										<div class="w-[120px]">* 活动ID</div>
										<el-input type="number" disabled v-model="item.id" placeholder="请输入活动ID" />
									</div>
								</div>
								<div class="flex items-center mt-3">
									<div class="w-[120px]">* 充值金额</div>
									<el-input type="number" v-model="item.recharge_money" placeholder="请输入充值金额" />
								</div>
								<div class="flex items-center mt-3">
									<div class="w-[120px]">* 奖励金额</div>
									<el-input type="number" v-model="item.money" placeholder="请输入奖励金额" />
								</div>
								<div class="flex items-center mt-3">
									<div class="w-[120px]">* 开启状态</div>
									<el-radio-group v-model="item.is_show">
										<el-radio label="1">开启</el-radio>
										<el-radio label="0">关闭</el-radio>
									</el-radio-group>
								</div>
							</div>
						</div>
					</del-wrap>
				</template>
			</draggable>
			<div>
				<el-button type="primary" @click="handleAdd(2)">添加</el-button>
			</div>
		</el-card>
		<!-- <el-card shadow="never" class="!border-none mt-4">
			<div class="text-xl font-medium mb-[20px]">奖励管理</div>
			<el-form ref="formRef" class="ls-form" label-position="top">
				<el-form-item label="注册奖励" prop="register">
					<div class="w-80">
						<el-input v-model.trim="rewardData.register" placeholder="请输入注册奖励"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="邀请奖励" prop="invite">
					<div class="w-80">
						<el-input v-model.trim="rewardData.invite" placeholder="请输入邀请奖励"></el-input>
						<div class="form-tips">邀请好友注册并完成首次充值即可获得奖励</div>
					</div>
				</el-form-item>
			</el-form>
		</el-card> -->

		<footer-btns v-perms="['setting.web.web_setting/setWebsite']">
			<el-button type="primary" @click="handleSubmit">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="dictType">
	import { isEmpty } from 'lodash-es';
	import { getWebsiteProject, setWebsiteProject } from '@/api/setting/website'
	import { apiUserMemberAll } from '@/api/user_member'
	import Draggable from 'vuedraggable'
	import { useDictData, useDictOptions } from '@/hooks/useDictOptions'
	// 获取字典数据
	const { dictData } = useDictData('tasks_type')
	const { optionsData } = useDictOptions<{
		members : any[]
	}>({
		members: {
			api: apiUserMemberAll
		}
	})

	const name = ref('reward')

	// 表单数据
	const rewardData = reactive({
		register: 0,
		invite: 0,
		signin_money:0,
		signin_point:0,
		tasks: [],
		activity: []
	})
	const handleAdd = (type : number) => {
		if (type == 1) {
			rewardData.tasks.push({
				id: rewardData.tasks.length + 1,
				
				type: "1",

				//升级vip
				member_id: '',

				//邀请下级首充
				recharge_money: 0,

				//累积邀请奖励
				invite_num: 0,
				is_repeat: '0',

				money: '',
				is_show:'1'
			})
		} else if (type == 2) {
			rewardData.activity.push({
				id: rewardData.activity.length + 1,
				recharge_money: 0,
				money: '',
				is_show:'1'
			})
		}

	}
	const handleDelete = (index : number, type : number) => {
		if (type == 1) {
			rewardData.tasks.splice(index, 1)
		} else if (type == 2) {
			rewardData.activity.splice(index, 1)
		}

	}

	const handleSubmit = async () => {
		await setWebsiteProject({ name: name.value, content: rewardData })
		getData()
	}

	const getData = async () => {
		const data = await getWebsiteProject({ name: name.value })
		if (!isEmpty(data.data)) {
			for (const key in rewardData) {
				if (data.data[key] != null && data.data[key] != undefined) {
					//@ts-ignore
					rewardData[key] = data.data[key]
				}
			}
		}
	}

	getData()
</script>

<style lang="scss" scoped></style>